<template>
  <view class="container">
    <!-- <view class="header">
            账号登录
        </view> -->
    <cu-custom bgColor="bg-gradual-purple" :isBack="false">
      <block slot="content"> Cleanbio Hygiene</block>
    </cu-custom>
    <view class="main" style="border-top: 1px solid #dedede">
      <view class="icon">
        <image
          src="../../static/img/login-app.png"
          mode="aspectFill"
          style="height: 100%; width: 100%"
        ></image>
        <!-- <tui-icon name="camera" color="#fff" :size="200" unit="rpx"></tui-icon> -->
      </view>
      <view class="form">
        <view class="viwe1">
          <tui-icon name="people-fill" :size="50" unit="rpx"></tui-icon>
          <input
            class="input1"
            type="text"
            placeholder="Please enter user name"
            v-model="username"
          />
          <tui-icon
            v-if="username != ''"
            @click="emptyusername"
            name="shut"
            :size="40"
            unit="rpx"
            class="switch"
          >
          </tui-icon>
        </view>
        <view>
          <tui-icon name="pwd" :size="50" unit="rpx"></tui-icon>
          <input
            :type="ispasword"
            placeholder="Please enter the login password"
            v-model="password"
            class="password"
          />
          <tui-icon
            v-if="password != ''"
            @click="emptypassword"
            name="shut"
            :size="40"
            unit="rpx"
            class="switch2"
          >
          </tui-icon>
          <switch @change="switch2Change" :checked="checked" class="switch" />
        </view>
        <button @click="gotoindex">Login</button>
      </view>
    </view>
    <view class="bbh">
      <text>Version {{ $cfg.ver }}</text>
    </view>
  </view>
</template>

<script>
import md5 from '@/common/lib/md5.js';
export default {
  data() {
    return {
      open: false,
      username: '',
      password: '',
      c: '',
      ispasword: 'password',
      checked: false,
    };
  },
  mounted() {
      this.c = this.f.getquerystring('c') || 'cleanbio'
    // this.c = this.f.getquerystring('c') || 'cleancase';
  },
  methods: {
    gotoindex() {
      var t = this;
      // let obj = {
      //   username: t.username,
      //   password: t.password,
      // }
      t.$api
        .req(`front/core/login/signin`, {
          c: t.c,
          bh: t.username,
          mm: md5(t.password),
        })
        .then((res) => {
          if (res.ok) {
            t.$cfg.token(res.token);
            t.$cfg.user(res.data);
			t.f.storage('blind_token', res.token)
            t.f.msg('Login Success！');
            t.f.nav('/pages/index/index', 'M');
          } else {
            t.f.msg(res.msg);
          }
        });
      // t.$api.req(`auth/portal/login?userName=${obj.username}&&passwd=${obj.password}`,obj,"GET").then(res => {
      //     if (res.code == 200) {
      //         t.$cfg.token(res.data.authorization)
      //     } else {
      //         t.f.msg(res.data.msg)
      //     }
      // });
    },
    switch2Change(val) {
      this.checked = !this.checked;
      if (this.checked) {
        this.ispasword = 'text';
      } else {
        this.ispasword = 'password';
      }
    },
    emptyusername() {
      this.username = '';
    },
    emptypassword() {
      this.password = '';
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  padding-bottom: 15px;
  border: 1px solid #e9e9e9;
  font-size: 48rpx;
  font-weight: 700;
}

.icon {
  margin: 0 auto;
  margin-top: 20px;
  width: 100%;
  height: 250rpx;
  border-radius: 80rpx;
  text-align: center;
  line-height: 250rpx;
  background-color: #fff;
}

.form {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 50rpx;
}

.form view {
  position: relative;
  width: calc(100% - 20px);
  height: 100rpx;
  display: flex;
  align-items: center;
  border: 1px solid #e9e9e9;
  gap: 20rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
}

button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #409eff;
  color: #fff;
}

.switch {
  position: absolute;
  right: 20rpx;
}

.switch2 {
  position: absolute;
  right: 160rpx;
}

.password {
  border: none;
  outline: none;
  font-size: 32rpx;
}

.bbh {
  position: absolute;
  font-size: $uni-font-size-sm;
  bottom: 0.5rem;
  left: 0;
  text-align: center;
  right: 0;
  color: #989898;
}
</style>